<template>
    <view>
        <view class="center-center audio-btns">
            <button v-if="!isPlay" class="play-btn" size="mini" @click="onPlayAudio">播放</button>
            <button v-if="isPlay" class="play-btn" size="mini" @click="onPauseAudio">暂停</button>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onReady} from "@dcloudio/uni-app"
import { ref, onMounted, onUnmounted } from 'vue'

import { useAppStore } from '@/stores/app'
const appStore = useAppStore()

const emits = defineEmits(['update:modelValue'])
let props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    audioUrl: {
        type: String
    }
})
let innerAudioContext = ''
let isPlay = ref(false)
function onPlayAudio(audioSrc) {
    console.log(`${appStore.config.domain}${props.audioUrl}`);
    innerAudioContext.stop()
    innerAudioContext.src = `${appStore.config.domain}${props.audioUrl}`
    isPlay.value = true
    innerAudioContext.play()
}
function onPauseAudio() {
    innerAudioContext.pause()
    isPlay.value = false
}

onMounted(() => {
    console.log('onMounted')
    innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.autoplay = false; //不自动播放
    innerAudioContext.src = ''
    innerAudioContext.onEnded(() => {
        isPlay.value = false
    })
})

onUnmounted(() => {
    console.log('onUnmounted')
    innerAudioContext.pause()
    innerAudioContext.destroy();
})


</script>


<style lang="scss" scoped>
.audio{
    width: 150rpx;
    height: 60rpx;
    background: rgba(0, 0, 0, 0.2);

    text{
        color: #fff;
    }
}

.audio-btns{
    position: fixed;
    top: 50rpx;
    right: 50rpx;
    z-index: 1000;

    .play-btn {
        background-color: #fff;
        border: 1rpx solid #ff6633;
        color: #ff6633;
        font-size: 24rpx;
        border-radius: 12rpx;
        float:right;
    }
}

</style>